<template>
	<div class="app-container">
		<!-- 搜索区域 -->
		<el-form :inline="true" :model="searchForm" ref="searchForm" size="mini">
			<el-form-item label="昵称" prop="nickname">
				<el-input v-model.trim="searchForm.nickname" placeholder="请输入昵称" clearable @clear="handleSearch" />
			</el-form-item>
			<el-form-item label="手机号" prop="phone">
				<el-input v-model.trim="searchForm.phone" placeholder="请输入手机号" clearable @clear="handleSearch" />
			</el-form-item>
			<el-form-item label="认证状态" prop="studentStatus">
				<el-select v-model="searchForm.studentStatus" placeholder="请选择认证状态" clearable @clear="handleSearch">
					<el-option v-for="item in studentStatusOptions" :key="item.value" :label="item.label"
						:value="item.value" />
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="handleSearch">搜索</el-button>
				<el-button @click="handleReset">重置</el-button>
			</el-form-item>
		</el-form>

		<!-- 表格区域 -->
		<el-table :data="userList" border style="width: 100%" v-loading="loading" size="mini">
			<el-table-column type="index" label="序号" width="60" align="center" :index="calculateIndex" />
			<el-table-column prop="nickname" label="昵称" />
			<el-table-column prop="phone" label="手机号" />
			<el-table-column label="头像">
				<template slot-scope="scope">
					<el-image :src="scope.row.avatar" :preview-src-list="[scope.row.avatar]"
						style="width: 50px; height: 50px" fit="cover" />
				</template>
			</el-table-column>
			<el-table-column prop="gender" label="性别">
				<template slot-scope="scope">
					{{ getGenderText(scope.row.gender) }}
				</template>
			</el-table-column>
			<el-table-column prop="createTime" label="注册时间" />
			<el-table-column prop="studentStatus" label="学生状态">
				<template slot-scope="scope">
					<el-tag :type="getStatusType(scope.row.studentStatus)">
						{{ getStatusText(scope.row.studentStatus) }}
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="120">
				<template slot-scope="scope">
					<el-button size="mini" type="primary" icon="el-icon-view" @click="handleDetail(scope.row)">
						查看
					</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!-- 分页组件 -->
		<div class='page'>
			<el-pagination @size-change='handleSizeChange' @current-change='handleCurrentChange' :current-page='pageNum'
				:page-sizes='[5, 10, 15]' :page-size='pageSize' layout='total, sizes, prev, pager, next'
				:total='total'></el-pagination>
		</div>
		<!-- 详情弹窗 -->
		<el-dialog title="认证详情" :visible.sync="dialogVisible" width="600px" :close-on-click-modal="false">
			<div v-loading="detailLoading">
				<el-form label-width="100px" v-if="detailInfo" size="mini">
					<el-form-item label="姓名">
						<span>{{ detailInfo.name }}</span>
					</el-form-item>
					<el-form-item label="学号">
						<span>{{ detailInfo.studentNo }}</span>
					</el-form-item>
					<el-form-item label="学院">
						<span>{{ detailInfo.college }}</span>
					</el-form-item>
					<el-form-item label="专业">
						<span>{{ detailInfo.major }}</span>
					</el-form-item>
					<el-form-item label="班级">
						<span>{{ detailInfo.classes }}</span>
					</el-form-item>
					<el-form-item label="学生证">
						<div class="student-pics">
							<div v-for="(pic, index) in studentPics" :key="index" class="pic-item">
								<el-image :src="pic" :preview-src-list="studentPics" :z-index="3000" fit="contain" />
							</div>
						</div>
					</el-form-item>
				</el-form>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button size="mini" @click="dialogVisible = false">取 消</el-button>
				<template v-if="detailInfo && detailInfo.status === 1">
					<el-button size="mini" type="danger" @click="handleAudit(3)" :loading="auditLoading">拒 绝</el-button>
					<el-button size="mini" type="primary" @click="handleAudit(2)" :loading="auditLoading">通
						过</el-button>
				</template>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { httpuserlist, getAuthDetail, audit } from '@/api/user'

export default {
	name: 'UserList',
	data() {
		return {
			userList: [],
			loading: false,
			// 搜索表单
			searchForm: {
				nickname: '',
				phone: '',
				studentStatus: ''
			},
			// 认证状态选项
			studentStatusOptions: [
				{ value: 0, label: '未认证' },
				{ value: 1, label: '认证中' },
				{ value: 2, label: '认证成功' },
				{ value: 3, label: '认证失败' }
			],
			// 分页参数
			pageNum: 1,
			pageSize: 10,
			total: 0,
			// 弹窗相关
			dialogVisible: false,
			detailLoading: false,
			auditLoading: false,
			detailInfo: null
		}
	},
	created() {
		this.getUserList()
	},
	methods: {
		// 获取用户列表
		async getUserList() {
			this.loading = true
			const params = {
				pageNum: this.pageNum,
				pageSize: this.pageSize,
				...this.searchForm
			}
			const res = await httpuserlist(params)
			this.userList = res.records
			this.total = Number.parseInt(res.total)
			this.loading = false
		},
		// 查看详情
		async handleDetail(row) {
			this.dialogVisible = true
			this.detailLoading = true
			try {
				const res = await getAuthDetail(row.id)
				this.detailInfo = res
			} catch (error) {
			} finally {
				this.detailLoading = false
			}
		},
		// 每页条数改变
		handleSizeChange(val) {
			this.pageSize = val
			this.getUserList()
		},
		// 当前页改变
		handleCurrentChange(val) {
			this.pageNum = val
			this.getUserList()
		},
		// 搜索
		handleSearch() {
			this.pageNum = 1 // 搜索时重置到第一页
			this.getUserList()
		},
		// 重置
		handleReset() {
			this.$refs.searchForm.resetFields()
			this.searchForm = {
				nickname: '',
				phone: '',
				studentStatus: ''
			}
			this.pageNum = 1
			this.getUserList()
		},
		// 获取状态标签类型
		getStatusType(status) {
			const statusMap = {
				0: 'info',
				1: 'warning',
				2: 'success',
				3: 'danger'
			}
			return statusMap[status] || 'info'
		},
		// 获取状态文本
		getStatusText(status) {
			const statusMap = {
				0: '未认证',
				1: '认证中',
				2: '认证成功',
				3: '认证失败'
			}
			return statusMap[status] || '未知状态'
		},
		// 处理审核
		async handleAudit(status) {
			if (!this.detailInfo?.id) {
				this.$message.error('审核数据异常')
				return
			}

			const statusText = status === 2 ? '通过' : '拒绝'
			try {
				this.auditLoading = true
				await audit({
					id: this.detailInfo.id,
					status
				})
				this.$message.success(`审核${statusText}成功`)
				this.dialogVisible = false
				this.getUserList() // 刷新列表
			} catch (error) {
			} finally {
				this.auditLoading = false
			}
		},
		// 获取性别文本
		getGenderText(gender) {
			const genderMap = {
				0: '未知',
				1: '男',
				2: '女'
			}
			return genderMap[gender] || '未知'
		},
		// 计算序号
		calculateIndex(index) {
			return (this.pageNum - 1) * this.pageSize + index + 1
		}
	},
	computed: {
		// 处理学生证图片数组
		studentPics() {
			if (!this.detailInfo?.pic) return []
			return this.detailInfo.pic.split(',').filter(pic => pic)
		}
	}
}
</script>

<style lang="less" scoped>
.app-container {
	.student-pics {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;

		.pic-item {
			width: 100px;
			height: 75px;
			border: 1px solid #ebeef5;
			border-radius: 4px;
			overflow: hidden;

			:deep(.el-image) {
				width: 100%;
				height: 100%;
			}
		}
	}
}
</style>
